import React from 'react';
import {SearchBar, Icon, Card, ListItem, Text} from 'react-native-elements';
import {Alert, View} from 'react-native';
import HttpUtil from '../utils/HttpUtil';

export default class Search extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      search: '',
      cars: [],
    };
  }

  updateSearch = (search) => {
    this.setState({
      search: search,
    });
  };
  querySearch = (search) => {
    const url = `http://localhost:3000/api/query/:license`;
    const data = {
      query: search,
    };

    console.log(data.query);

    if (data.query == '') {
      Alert.alert('搜索内容不能为空');
      return false;
    }

    HttpUtil.post(url, data)
      .then((res) => {
        // console.log(res);
        // console.log(JSON.parse(res.cars));

        if (res != null) {
          this.setState({
            cars: JSON.parse(res.cars),
          });
          // console.log(this.state.cars + '***********');
          console.log(this.state.cars);

          // console.log('================');
          // console.log(this.state.cars[0].car_info);
          // console.log('-----------------');
          // console.log(this.state.cars[1].car_info);
          // console.log('================');
        } else {
          console.log('================');
          console.log('================');
          console.log(JSON.parse(res));

          // Alert.alert(res.msg);
        }
      })
      .then((err) => {
        console.log(err);
      });
  };

  render() {
    const {search, cars} = this.state;

    return (
      <>
        <SearchBar
          lightTheme
          // icon={{type: 'font-awesome', name: 'search'}}
          placeholder="输入要搜索的车型"
          onChangeText={this.updateSearch}
          value={search}
          autoCapitalize={false}
        />
        <Icon
          raised
          name="search"
          type="font-awesome"
          color="grey"
          // onPress={() => this.querySearch}
          onPress={() => this.querySearch(this.state.search)}
        />
        <Card
          style={{
            flex: 1,
            textAlign: 'center',
            AlignItems: 'center',
            justifyContent: 'center',
          }}>
          <Text style={{marginBottom: 10, textAlign: 'center', marginTop: 15}}>
            {cars.map((item) => {
              item.car_info;
            })}
            {11111}
          </Text>
        </Card>
      </>
    );
  }
}
